<template>
  <!-- 侧边栏 -->
  <mu-drawer
    :open="open"
    :docked="docked"
    class="aside-drawer"
    :z-depth="1"
    @update:open="$emit('update:open', $event)"
  >
    <!-- 顶部标识 -->
    <div class="drawer-header">
      <div class="drawer-header-title">智力方舟出题系统</div>
      <div class="drawer-header-version">{{ version.current.text }}</div>
    </div>
    <mu-divider></mu-divider>
    <!-- 主菜单 -->
    <mu-list toggle-nested>
      <mu-list-item button :to="{ name: 'message-notice' }">
        <mu-list-item-title>公告栏</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('info.public')" button :to="{ name: 'question-statistics' }">
        <mu-list-item-title>题库统计</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('questions.statistics_author')" button :to="{ name: 'question-statistics-author' }">
        <mu-list-item-title>出题统计</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('questions.post')" button nested :open="asideMenu.questions" @toggle-nested="toggleMenu('questions')">
        <mu-list-item-title>题库</mu-list-item-title>
        <mu-list-item-action>
          <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
        </mu-list-item-action>
        <mu-list-item slot="nested" button :to="{ name: 'question-all' }">
          <mu-list-item-title>所有题目</mu-list-item-title>
        </mu-list-item>
        <mu-list-item slot="nested" button :to="{ name: 'question-query' }">
          <mu-list-item-title>搜索题目</mu-list-item-title>
        </mu-list-item>
        <mu-list-item slot="nested" button :to="{ name: 'question-mine' }">
          <mu-list-item-title>我出的题</mu-list-item-title>
        </mu-list-item>
      </mu-list-item>
      <mu-list-item v-if="can('questions.post')" button :to="{ name: 'question-create-index' }">
        <mu-list-item-title>出题</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('questions.exam')" button nested :open="asideMenu.exam" @toggle-nested="toggleMenu('exam')">
        <mu-list-item-title>做题</mu-list-item-title>
        <mu-list-item-action>
          <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
        </mu-list-item-action>
        <mu-list-item slot="nested" button :to="{ name: 'exam-all' }">
          <mu-list-item-title>做题列表</mu-list-item-title>
        </mu-list-item>
        <mu-list-item slot="nested" button :to="{ name: 'exam-index' }">
          <mu-list-item-title>开始做题</mu-list-item-title>
        </mu-list-item>
      </mu-list-item>
      <mu-list-item v-if="can('questions.check')" button nested :open="asideMenu.check" @toggle-nested="toggleMenu('check')">
        <mu-list-item-title>审题</mu-list-item-title>
        <mu-list-item-action>
          <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
        </mu-list-item-action>
        <mu-list-item slot="nested" button :to="{ name: 'check-all' }">
          <mu-list-item-title>审题列表</mu-list-item-title>
        </mu-list-item>
        <mu-list-item slot="nested" button :to="{ name: 'check-index' }">
          <mu-list-item-title>开始审题</mu-list-item-title>
        </mu-list-item>
        <mu-list-item slot="nested" button :to="{ name: 'check-review' }">
          <mu-list-item-title>重审请求列表</mu-list-item-title>
        </mu-list-item>
      </mu-list-item>
      <mu-list-item button :to="{ name: 'message-board' }">
        <mu-list-item-title>留言板</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('users.management')" button :to="{ name: 'user-management' }">
        <mu-list-item-title>用户管理</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-if="can('types.management')" button :to="{ name: 'type-management' }">
        <mu-list-item-title>题型管理</mu-list-item-title>
      </mu-list-item>
      <mu-list-item button :to="{ name: 'personal-center' }">
        <mu-list-item-title>个人中心</mu-list-item-title>
      </mu-list-item>
      <mu-list-item button @click="handleLogout()">
        <mu-list-item-title>登出</mu-list-item-title>
      </mu-list-item>
    </mu-list>

    <!-- 出题设置 -->
    <mu-divider></mu-divider>
    <mu-list>
      <mu-sub-header>出题设置</mu-sub-header>
      <mu-list-item button :ripple="false" @click="swtichQcMode()">
        <mu-list-item-title>出题模式</mu-list-item-title>
        <mu-list-item-action>
          <span class="mu-text-secondary">{{ qcModeText }}</span>
        </mu-list-item-action>
      </mu-list-item>
      <mu-list-item button :ripple="false" @click="swtichQcClip()">
        <mu-list-item-title>裁剪模式</mu-list-item-title>
        <mu-list-item-action>
          <span class="mu-text-secondary">{{ qcClipText }}</span>
        </mu-list-item-action>
      </mu-list-item>
      <mu-list-item button :ripple="false" @click="swtichQcPreview()">
        <mu-list-item-title>预览题目</mu-list-item-title>
        <mu-list-item-action>
          <mu-switch v-model="qcConfigPreview" readonly></mu-switch>
        </mu-list-item-action>
      </mu-list-item>
    </mu-list>

    <!-- 系统设置 -->
    <mu-divider></mu-divider>
    <mu-list>
      <mu-sub-header>系统设置</mu-sub-header>
      <mu-list-item button :ripple="false" @click="swtichPagin()">
        <mu-list-item-title>页码显示位置</mu-list-item-title>
        <mu-list-item-action>
          <span class="mu-text-secondary">{{ paginText }}</span>
        </mu-list-item-action>
      </mu-list-item>
      <mu-list-item button :ripple="false" @click="swtichTheme()">
        <mu-list-item-title>夜间模式</mu-list-item-title>
        <mu-list-item-action>
          <mu-switch v-model="isNight" readonly></mu-switch>
        </mu-list-item-action>
      </mu-list-item>
      <mu-list-item button :ripple="false" @click="swtichIsPhone()">
        <mu-list-item-title>手机版</mu-list-item-title>
        <mu-list-item-action>
          <mu-switch v-model="isPhone" readonly></mu-switch>
        </mu-list-item-action>
      </mu-list-item>
    </mu-list>

    <!-- 关于 -->
    <mu-divider></mu-divider>
    <mu-list>
      <mu-list-item button :ripple="false" @click="openAbout = true">
        <mu-list-item-title>关于</mu-list-item-title>
      </mu-list-item>
    </mu-list>
    <about-dialog v-model="openAbout" />
  </mu-drawer>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import AboutDialog from './AboutDialog'

export default {
  name: 'AsideDrawer',
  components: {
    AboutDialog
  },
  props: {
    open: {
      type: Boolean,
      required: true
    },
    docked: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      openAbout: false
    }
  },
  computed: {
    ...mapGetters({
      version: 'version',
      isNight: 'nightMode',
      isPhone: 'isPhone',
      pagin: 'pagin',
      can: 'currentUserHasPermissionByCode',
      qcMode: 'questionCreateMode',
      qcConfig: 'questionCreateConfig',
      asideMenu: 'asideMenu'
    }),
    qcConfigPreview() {
      return this.qcConfig.preview
    },
    paginText() {
      const map = {
        'top': '顶部',
        'bottom': '底部',
        'both': '全部',
        'auto': '自动'
      }
      return map[this.pagin] || '未知'
    },
    qcModeText() {
      const map = {
        'form': '表单',
        'poll': '轮询',
        'mixed': '混合'
      }
      return map[this.qcMode] || '未知'
    },
    qcClipText() {
      const map = {
        'off': '不裁剪',
        'auto': '自动裁剪',
        'manual': '手动裁剪'
      }
      return map[this.qcConfig.clip] || '未知'
    }
  },
  methods: {
    ...mapMutations({
      setIsNight: 'SET_NIGHT_MODE',
      setIsPhone: 'SET_IS_PHONE',
      setPagin: 'SET_PAGIN',
      setQcMode: 'SET_QUESTION_CREATE_MODE',
      setQcConfig: 'SET_QUESTION_CREATE_CONFIG',
      setAsideMenu: 'SET_ASIDE_MENU'
    }),
    ...mapActions({
      logout: 'logout'
    }),
    swtichTheme() {
      this.setIsNight(!this.isNight)
    },
    swtichIsPhone() {
      if (this.$route.name === 'question-create') {
        this.$confirm('您正在出题，切换模式会导致数据丢失，是否继续？', '提示', {
          type: 'warning'
        }).then(async({ result }) => {
          if (result) {
            this.setIsPhone(!this.isPhone)
          } else {
            this.$toast.message('已取消')
          }
        })
      } else {
        this.setIsPhone(!this.isPhone)
      }
    },
    swtichPagin() {
      const list = ['top', 'bottom', 'both', 'auto']
      const currentIndex = list.indexOf(this.pagin)
      const nextIndex = currentIndex >= 0 ? ((currentIndex + 1) % list.length) : 0
      this.setPagin(list[nextIndex])
    },
    swtichQcMode() {
      const list = ['form', 'poll', 'mixed']
      const currentIndex = list.indexOf(this.qcMode)
      const nextIndex = currentIndex >= 0 ? ((currentIndex + 1) % list.length) : 0
      this.setQcMode(list[nextIndex])
    },
    swtichQcClip() {
      const config = { ...this.qcConfig }
      const list = ['off', 'auto', 'manual']
      const currentIndex = list.indexOf(config.clip)
      const nextIndex = currentIndex >= 0 ? ((currentIndex + 1) % list.length) : 0
      config.clip = list[nextIndex]
      this.setQcConfig(config)
    },
    swtichQcPreview() {
      const config = { ...this.qcConfig }
      config.preview = !config.preview
      this.setQcConfig(config)
    },
    toggleMenu(key) {
      const menu = { ...this.asideMenu }
      menu[key] = !menu[key]
      this.setAsideMenu(menu)
    },
    // 登出
    async handleLogout() {
      try {
        await this.logout()
        this.$toast.success('登出成功')
        this.$router.push({ name: 'login-page' })
      } catch (err) {
        this.$apiCatch(err)
      }
    }
  }
}
</script>

<style scoped>
.drawer-header {
  padding: 12px;
  /* color: #0009; */
}
.drawer-header-title {
  font-size: 26px;
  font-weight: bold;
}
.drawer-header-version {
  font-size: 12px;
}
</style>
